<template>
  <div class="margin_30">
    <el-card shadow="never" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>分类管理</span>
      </div>
      <div class="title" style="margin-bottom:20px">乐居分类:</div>
      <el-row>
        <el-col v-for="(item,index) in leju" :key="item.id" :span="6">
          <el-card shadow="never" style="margin:10px;width:320px;height:400px">
            <div slot="header">
              <span>{{ item.name }}</span>
            </div>
            <el-upload
              class="upload-demo"
              :action="uploadFileOss"
              :headers="token"
              :show-file-list="false"
              :on-success="ele=>uploadImg(ele,index)"
            >
              <img style="width:100%;padding:20px" :src="item.icon" alt="">
            </el-upload>
          </el-card>
        </el-col>
      </el-row>

      <div class="title" style="margin:20px 0">全部分类:</div>
      <el-table
        :data="list"
        style="width: 100%;height:100%;margin-bottom: 20px;"
        row-key="id"
        border
        :default-expand-all="false"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column
          prop="name"
          label="菜单名称"
          width="150"
        />
        <el-table-column
          prop="icon"
          label="icon"
          width="150"
          align="center"
        >
          <template v-slot="scope">
            <img style="width:50px;height:50px" :src="scope.row.icon" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="分类名字"
        />
        <el-table-column
          prop="sort"
          align="center"
          label="排序"
        />
        <el-table-column
          prop="showStatus"
          align="center"
          label="显示状态"
        />
        <el-table-column
          prop="navStatus"
          align="center"
          label="导航栏展示"
        />
        <el-table-column
          prop="description"
          align="center"
          label="描述"
        />
        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间"
        />
      </el-table>
    </el-card>

  </div>
</template>

<script>
import mix from '@/mixins'
import { getAllCategory, updateCategory } from '@/api/product/category'
export default {
  name: 'VueAdminTemplateMasterIndex',
  mixins: [mix],

  data() {
    return {
      leju: [],
      list: []
    }
  },

  computed: {
    // leju() {
    //   if (this.list.find(ele => ele.category.name === '乐居')) {
    //     return this.list.find(ele => ele.category.name === '乐居').children
    //   }
    //   return []
    // }
  },

  created() {
    this.getCategoryList()
  },

  mounted() {

  },

  methods: {
    // 上传分类图片
    uploadImg(e, index) {
      // console.log(e)
      this.leju[index].icon = e.data.fileUrl
      updateCategory(this.leju[index])
        .then(res => {
          this.getCategoryList
        })
    },
    // 获取商品分类列表
    getCategoryList() {
      getAllCategory()
        .then(res => {
          console.log(res)
          var arr = res.data.items.map(ele => {
            return {
              ...ele.category,
              children: ele.children
            }
          })
          this.list = arr

          // 判断显示状态和导航栏显示是否展示
          arr.forEach(ele => {
            if (ele.showStatus) {
              ele.showStatus = '显示'
            } else {
              ele.showStatus = '不显示'
            }
            if (ele.navStatus) {
              ele.navStatus = '显示'
            } else {
              ele.navStatus = '不显示'
            }
          })
          this.leju = arr.find(ele => ele.name === '乐居').children
        })
    }
  }
}

</script>

<style lang="scss" scoped>
.margin_30{
  .title{
    color: rgba(0,0,0,.85);
    font-weight: 700;
    font-size: 16px;
  }
}
</style>
